<!doctype html>
<html>

<head>
  <title>Cross Request - 域名管理</title>
  <meta charset="utf8" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 14px;
      background: #f5f5f5;
      color: #333;
    }

    .main {
      width: 400px;
      min-height: 500px;
      background: white;
    }

    .header {
      background: #4a90e2;
      color: white;
      padding: 16px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .header h1 {
      font-size: 18px;
      margin: 0;
    }

    .header p {
      font-size: 12px;
      margin-top: 4px;
      opacity: 0.9;
    }

    .content {
      padding: 16px;
    }

    .section {
      margin-bottom: 24px;
    }

    .section-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #555;
    }

    .allow-all {
      padding: 12px;
      background: #f8f9fa;
      border-radius: 6px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .allow-all label {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
    }

    .allow-all input[type="checkbox"] {
      margin-right: 8px;
      cursor: pointer;
    }

    .warning {
      background: #fff3cd;
      color: #856404;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 16px;
      font-size: 13px;
      line-height: 1.5;
    }

    .domain-list {
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      max-height: 200px;
      overflow-y: auto;
    }

    .domain-item {
      padding: 10px 16px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background-color 0.2s;
    }

    .domain-item:hover {
      background-color: #f8f9fa;
    }

    .domain-item:last-child {
      border-bottom: none;
    }

    .domain-name {
      font-family: monospace;
      font-size: 13px;
    }

    .delete-btn {
      background: none;
      border: none;
      color: #dc3545;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background-color 0.2s;
    }

    .delete-btn:hover {
      background-color: #f8d7da;
    }

    .add-domain {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .add-domain input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #ced4da;
      border-radius: 4px;
      font-size: 14px;
    }

    .add-domain input:focus {
      outline: none;
      border-color: #4a90e2;
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }

    .add-btn {
      padding: 8px 16px;
      background: #4a90e2;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: background-color 0.2s;
    }

    .add-btn:hover {
      background: #357abd;
    }

    .add-btn:disabled {
      background: #ced4da;
      cursor: not-allowed;
    }

    .empty-state {
      text-align: center;
      padding: 24px;
      color: #6c757d;
      font-size: 13px;
    }

    .footer {
      padding: 16px;
      border-top: 1px solid #e0e0e0;
      text-align: center;
      font-size: 12px;
      color: #6c757d;
    }

    .footer a {
      color: #4a90e2;
      text-decoration: none;
    }

    .footer a:hover {
      text-decoration: underline;
    }

    .status {
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 13px;
      margin-top: 12px;
      display: none;
    }

    .status.success {
      background: #d4edda;
      color: #155724;
      display: block;
    }

    .status.error {
      background: #f8d7da;
      color: #721c24;
      display: block;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="header">
      <h1>Cross Request 域名管理</h1>
      <p>管理允许发起跨域请求的域名</p>
    </div>

    <div class="content">
      <div class="section">
        <div class="allow-all">
          <label>
            <input type="checkbox" id="allowAll" />
            允许所有域名（不推荐）
          </label>
        </div>
        
        <div class="warning" id="securityWarning" style="display: none;">
          ⚠️ 警告：允许所有域名会带来安全风险。建议只添加信任的域名。
        </div>
      </div>

      <div class="section">
        <h3 class="section-title">已允许的域名</h3>
        <div class="domain-list" id="domainList">
          <div class="empty-state">加载中...</div>
        </div>

        <div class="add-domain">
          <input 
            type="text" 
            id="newDomain" 
            placeholder="输入域名，如: *.example.com" 
          />
          <button class="add-btn" id="addBtn">添加</button>
        </div>

        <div class="status" id="status"></div>
      </div>
    </div>

    <div class="footer">
      <a href="https://github.com/leeguooooo/cross-request-master" target="_blank">查看帮助文档</a>
    </div>
  </div>

  <script src="popup.js"></script>
</body>

</html>